import React ,{useState,useCallback,useRef}from "react";
import axios from 'axios'
import { useHistory } from 'react-router-dom'

import NavBar from "@/components/navBar/NavBar";
import { RegisterWrapper } from "./styledRegister";
import Button from "@/components/button/Button";

export default function Register() {
  const [ checked,setChecked ] = useState(false)
  const [ num,setNum]=useState() 
  const  [pass,setPass]=useState()
  const  [repass,setrePass]=useState()

  const telInput = useRef()
  const passInput = useRef()   
  const repassInput = useRef()
  
  const history = useHistory()

  const changeChecked = useCallback(
    () => {
      setChecked(!checked)
    },
    [checked,setChecked],
  )
 
  const changeNum=useCallback(
    () => {
     setNum(telInput.current.value)
    },
    [setNum,telInput],
  )
  const changePass = useCallback(
    () => {
      setPass(passInput.current.value)
     
     },
     [setPass,passInput],
   )
   const changerePass = useCallback(
    () => {
      setrePass(repassInput.current.value)
     
     },
     [setrePass,repassInput],
   )
   const register=useCallback(
    async () => {
      if(pass===repass)
      {
        const result = await axios.get(
            '/api/login?num='+num+'&?pass='+pass
            )
        if(!result.data[0]){
          // await axios.post(
          //       '/api/login/id=0',
          //       {'num':num,'pass':pass}
          //       )
          axios({
            url: '/api/login',
            method: 'post',
            data: {
              'id': 3,
              'num':num,
              'pass':pass
            }
          }).then(
            response => {
              console.log(response);
            }
          )
          }
      }
     },
     [pass,repass,num],
   )
   const toLogin=useCallback(
     ()=>{
       history.push('/login')
     }
   )
  return (
    <RegisterWrapper >
      <NavBar leftArrow> </NavBar>
      <div className="content">
        <div className="head">
          <div className="big">注册医生账号</div>
          <div className="welcome">欢迎使用家医</div>
        </div>
        <div className="form">
          <div className="tl">手机号码</div>
          <input className="phone" type="text" value={num || ''}  onChange={changeNum} ref={telInput} placeholder="请输入手机号码" />
          <div className="tl">密码</div>
          <input className="pass" type="password" value={pass || ''} onChange={changePass} ref={passInput} placeholder="请输入密码" />
          <div className="tl">请再次输入密码</div>
          <input className="pass" type="password" value={repass || ''} onChange={changerePass} ref={repassInput}  placeholder="请再次输入密码" />
          <div className="read">
            <input type="checkbox" value={checked} onChange={changeChecked}/>
            <span className="ok">
              我已阅读并同意 <b>《用户隐私政策》</b>
            </span>
          </div>
          <Button text="立即注册" size="large" click={register} >
            
          </Button>
          <span className="bottom" onClick={toLogin}>已有账号，去登录</span>
        </div>
      </div>
    </RegisterWrapper>
  );
}
